<template>
    <div class="userTable">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark" style="font-size:14px;">
                    角色设置
                    <el-button class="fr" type="primary" @click="dialogVisible = true">新增角色</el-button>
                </div>
            </el-col>
        </el-row>
        <el-dialog
            title="角色新增"
            :visible.sync="dialogVisible"
            width="670px">
            <ul class="user-box clearfix">
                <li>
                    <label class="fl">角色名称</label>
                    <input type="text" name="" id="">
                </li>
                <li class="padding-top-20">
                    <label class="fl">角色代码</label>
                    <input type="text" name="" id="">
                </li>
                <li class="padding-top-20">
                    <label class="fl">角色描述</label>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </li>
                <li>
                    <label class="fl">角色描述</label>
                    <div class="adduser-buttom">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
                    </div>
                </li>
            </ul>
        </el-dialog>
        <template>
            <el-table :data="tableData" style="width: 100%" stripe :header-cell-style="getRowClass">
                <el-table-column prop="name" align="center" label="角色名称"></el-table-column>
                <el-table-column prop="date" align="center" label="角色代码"></el-table-column>
                <el-table-column prop="date" align="center" label="角色代码"></el-table-column>
                <el-table-column prop="name" align="center" label="角色用户" ></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text">用户</el-button>
                        <el-button type="text" @click="dialogUpdateClick(scope.row)">修改</el-button>
                        <el-button type="text" @click="delectUser(scope.row)">删除</el-button>
                        <el-button type="text">权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--分页开始-->
        <div class="block">
            <span class="pageFreshFoot"><el-button type="text" class="xin" @click="xin()">刷新</el-button></span>
            <div class="pageComponentFoot">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="cpage"
                    :page-sizes="[10,20,30,40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
                </el-pagination>
            </div>
            <div style="clear:both"></div>
        </div>
        <!--分页结束-->
         <el-dialog
            title="修改名称"
            :visible.sync="dialogUpdate"
            width="570px">
            <ul class="user-box clearfix update-box">
                <li>
                    <input type="text" v-model="updateName" name="" id="">
                </li>
                <li>
                    <div class="adduser-buttom">
                        <el-button @click="dialogUpdate = false">取 消</el-button>
                        <el-button type="primary" @click="dialogUpdate = false">保 存</el-button>
                    </div>
                </li>
            </ul>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            dialogVisible:false,
            dialogUpdate:false,
            totalPage:10,           //  总页数
            cpage:1,                //  当前页
            pagesize:10,            //  每页显示数
            totalCount:100,         //  总条数
            updateName:'',
            tableData: [{
                date: 'XXXXXX',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: 'XXXXXX',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: 'XXXXXX',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: 'XXXXXX',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            total: {Count: 100},
            pageNumber: 1,
        }
    },
    methods:{
        // 设置header颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return 'background:#D5E7F3'
            } else {
                return ''
            }
        },
        // 设置内容行的颜色
        tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 === 1) {
                return 'even-row';
            }   
            return '';
        },
        // 新增角色
        addUser(){

        },
        //  修改用户名
        dialogUpdateClick(row){
            console.log(row)        
            this.updateName = row.name
            this.dialogUpdate = true
        },
        // 删除用户
        delectUser(row){
            this.$confirm('您确定要删除这个用户吗？, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style scoped>
    .user-box li:nth-child(2){
        height: 42px;
    }
</style>
<style src="../../assets/css/gement.css"></style>

